<!--模板html-->
<template>
    <div>
        <!-- 按钮 -->
        <div class="btns">
            <el-button type="primary" size="small" @click="toFormHandler">新增</el-button>

            <el-autocomplete v-model="state" 
            :fetch-suggestions="loadBaseFiles" 
            placeholder="请输入内容" 
            @select="loadBaseFiles" ></el-autocomplete>
        </div>

        <!-- 表格 -->
        <div class="tab_content">
            <el-table
                :data="basefiles"
                style="width: 100%"
                v-loading="listLoading"
                element-loading-text="Loading"
                border
                fit
                highlight-current-row>
                <el-table-column align="center" prop="id" label="ID" width="250"> </el-table-column>
                <el-table-column align="center" prop="fileName" label="文件名" width="150"> </el-table-column>
                <el-table-column align="center" prop="groupName" label="组名" width="150"> </el-table-column>
                <!-- <el-table-column align="center" prop="uploadTime" label="上传时间" width="150"> </el-table-column> -->
                <el-table-column align="center" prop="uploadTime" label="上传时间" width="200">
                    <template slot-scope="scope">
                    <i class="el-icon-time" />
                    <span>{{ scope.row.uploadTime | fmtDate }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="extName" label="外部名称" width="110"></el-table-column>
                <el-table-column align="center" prop="fileSize" label="文件大小" width="110"></el-table-column>
                <el-table-column align="center" prop="fileType" label="文件类型" width="110"></el-table-column>
                <!-- <el-table-column align="center" prop="logTime" label="记录时间" width="200"> </el-table-column> -->
                
                <!-- 操作列 -->
                <el-table-column width="180" align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button type="success" @click="editHandler(scope.row)">修改</el-button>
                        <el-button type="danger" @click="deleteHandler(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<!--脚本js-->
<script>
import { get,del } from '@/utils/request'
export default {
    // 定义变量，在模板中直接使用
    data() {
        return {
            basefiles:[],
            visible:false

        }
        
    },
    // 定义事件处理函数、方法
    methods:{
        // 删除数据
        deleteHandler(row){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = "http://localhost:8888/basefile/deleteById"
        del(url,{id:row.id}).then(resp =>{
          // 1. 提示
          this.$message({type:"success",message:resp.message});
          // 2. 刷新
          this.loadBaseFiles();
        })
      })
        },
        // 修改数据
        editHandler(row){
      this.$router.push({ 
        path:"/xiaoxiao/baseFileForm" ,
        query:row
      })
    },
        // 查询所有数据
        loadBaseFiles(){
            let url ="http://localhost:8888/basefile/query"
            get(url).then(resp=>{
                // 获取数据后做的事情
                this.basefiles = resp.data;
            })
        },
       // 跳转
        toFormHandler(){
      this.$router.push({ path:"/xiaoxiao/baseFileForm" })
    }

    },
    // 生命周期钩子函数
    created(){
        this.loadBaseFiles()

    },
}
</script>

<!--样式html-->
<style lang="sass" scoped>

</style>